<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>0604-JS作业1-轮播图(无缝 图片数量可变)-螺旋</title>
	<style type="text/css">
		html{font-family: "Microsoft YaHei";}
		body{
			margin: 0;
			background-color: #666;
			cursor: default;
			-webkit-user-select:none;
			-moz-user-select:none;
			-ms-user-select:none;
			user-select:none;
		}
		ul{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.wrap,.banbox,.pics li,.pics img{
			width: 800px;
			height: 450px;
		}
		.wrap{
			margin: 50px auto;
		}
		.banbox{
			overflow: hidden;
			position: relative;
		}
		.banbox .pics{
			position: absolute;
			height: 450px;
		}
		.banbox .pics li{
			float: left;
		}
		.banbox .bbtn{
			position: absolute;
			bottom: 16px;
			left: 0;
			right: 0;
			height: 14px;
			margin: 0 auto;
			font-size: 0;
			text-align: center;
		}
		.banbox .bbtn li{
			display: inline-block;
			width: 10px;
			height: 10px;
			margin: 0 7px;
			background-color: rgba(0,0,0,.4);
			border: 2px solid rgba(255,255,255,.8);
			font-size: 0;
			border-radius: 50%;
			box-shadow: 0 0 3px #000;
			/*cursor: pointer;*/
		}
		/*.banbox .bbtn li:hover{
			border: 2px solid #f60;
		}*/
		.banbox .bbtn .act{
			background-color: #fff;
			border: 2px solid #f60;
		}
		.banbox .lbtn,.banbox .rbtn{
			position: absolute;
			top: 0;
			bottom: 0;
			width: 30px;
			height: 50px;
			margin: auto 0;
			background-color: rgba(0,0,0,.6);
			font-family: "新宋体";
			color: #fff;
			font-size: 30px;
			font-weight: 700;
			line-height: 50px;
			text-align: center;
			cursor: pointer;
		}
		.banbox .lbtn{
			left: 0;
			border-radius: 0 5px 5px 0;
		}
		.banbox .rbtn{
			right: 0;
			border-radius: 5px 0 0 5px;
		}
		.banbox .lbtn:hover,.banbox .rbtn:hover{
			color: #f60;
		}
	</style>
</head>
<body>
	<section class="wrap">
		<div class="banbox">
			<ul class="pics">
				<li><img src="images/1.jpg" alt="图片"></li>
				<li><img src="images/2.jpg" alt="图片"></li>
				<li><img src="images/3.jpg" alt="图片"></li>
				<li><img src="images/4.jpg" alt="图片"></li>
				<li><img src="images/5.jpg" alt="图片"></li>
				<li><img src="images/6.jpg" alt="图片"></li>
			</ul>
			<ul class="bbtn"></ul>
			<div class="lbtn">&lt;</div>
			<div class="rbtn">&gt;</div>
		</div>
	</section>
</body>
<script>
	var oBan = document.getElementsByClassName('banbox')[0],
        oPics = oBan.getElementsByClassName('pics')[0],
        nPicsL = oPics.getElementsByTagName('li').length,//获取图片数量
        oPicf = oPics.getElementsByTagName('li')[0].innerHTML,//获取第一张图片
        oPicl = oPics.getElementsByTagName('li')[nPicsL-1].innerHTML,//获取最后一张图片
        oBbtn = oBan.getElementsByClassName('bbtn')[0],
        oLbtn = oBan.getElementsByClassName('lbtn')[0],
        oRbtn = oBan.getElementsByClassName('rbtn')[0],
		start,nStart,num = 0,
        ready = true;//控制左右按钮是否可点

    oPics.style.width = `${800*(nPicsL+2)}px`;//生成图片ul的宽度
	
	//在原轮播图左侧插入最后一张图片 右侧插入第一张图片 用于无缝连接
    oPics.innerHTML = `<li>${oPicl}</li>` + oPics.innerHTML;
    oPics.innerHTML += `<li>${oPicf}</li>`;
    oPics.style.left = '-800px';//设置第一张图片的位置
	
    //根据图片数量生成底部圆扭
	for(var i=0;i<nPicsL;i++){
        oBbtn.innerHTML += '<li></li>';
    }
    var oBbLi = oBbtn.getElementsByTagName('li');
	oBbLi[0].className = 'act';
    oBbtn.style.width = `${28*oBbLi.length}px`;//生成底部圆扭ul的宽度
	
    //点击右按钮
    oRbtn.onclick = function(){
        start = parseFloat(fnGet(oPics)['left']);
        nStart = start;
        if(ready) {
            fnReady();//500毫秒后 按钮变为可点
            if (num < (nPicsL-1)) {
                num++;
                fnAnm(oPics,'left',800,50,num,start,nStart);
            }else{//轮播图返回第一张
                num = 0 ;
                fnAnm(oPics,'left',800,50,num,start,nStart);
                setTimeout(function (){//500毫秒后 重置轮播图到第一张
                    oPics.style.left = '-800px';
                },500);
            }
        }
    };

    //点击左按钮
    oLbtn.onclick = function(){
        start = parseFloat(fnGet(oPics)['left']);
        nStart = start;
        if(ready) {
            fnReady();//500毫秒后 按钮变为可点
            if (num > 0) {
                num--;
                fnAnm(oPics,'left',-800,-50,num,start,nStart);
            }else{//轮播图返回第一张
                num = nPicsL-1 ;
                fnAnm(oPics,'left',-800,-50,num,start,nStart);
                setTimeout(function (){//500毫秒后 重置轮播图到最后一张
                    oPics.style.left = `${-800*nPicsL}px`;
                },500);
            }
        }
    };

    //运动框架
    function fnAnm(elem,attr,val,step,num,start,nStart){
        function fnMod(){
            if(start === nStart - val){
            }else{
                start -= step;
                elem.style[attr] = start + "px";
                requestAnimationFrame(fnMod);
            }
        }
        fnMod();
        fnClear();//清除底部按钮样式
        oBbLi[num].className = "act";//点亮图片对应的底部圆扭
    }

    //通用函数
    function fnGet(elem){//获取标签属性
		return getComputedStyle(elem)||elem.currentStyle;
    }
    function fnClear(){//清除底部按钮样式
        for (var j=0;j < oBbLi.length;j++) {
            oBbLi[j].className = "";
        }
    }
    function fnReady(){//禁用左右按钮 500毫秒后恢复
        ready = false;
        setTimeout(function (){
            ready = true;
        },500);
	}
</script>
</html>